<template>
  <div class="box">
    <div class="logo">
      <img src="/logo.png" alt="">
      <h2>保尔酒庄管理</h2>
    </div>
    <div class="form">
      <div class="item">
        <h3>账户：</h3>
        <input type="text" v-model="user" placeholder="请输入账号">
      </div>
      <div class="item">
        <h3>密码：</h3>
        <input type="password" v-model="pass" placeholder="请输入密码">
      </div>
    </div>
    <div class="btn" @click="Login()">登录</div>
  </div>
</template>

<script>
import * as index from '@/api/index'
import cookies from "vue-cookies";
import {login} from "@/api/index"
export default {
  name: 'Login',
  data(){
    return{
      pass:'',
      user:''
    }
  },
  methods:{
	  async enter(){
		console.log("aaa")  
	  },
     Login:async function(){
		
      if(!this.pass||!this.user){
        this.$message({
          message: '账户或密码不可为空',
          type: 'error'
        });
        return
      }
	
      let data={
        account:'123456',
        password:'123456',
        code:1,
        isadmin:1
      }
	 const resp= await login("/user/userLogin",{
		account: this.user,
		password: this.pass
	  })
	 console.log(resp.code)
	 console.log(resp.data.user)
	 if(resp.code==20000){
	       let isadmin=resp.data.user.isadmin;
	       window.sessionStorage.setItem("user",JSON.stringify(resp.data.user))
		   // console.log(sessionStorage.getItem("user"))
	       this.$store.dispatch('changeLogin')
	       if(isadmin==1){
	         this.$router.push('/admin/admin')
	       }else if(isadmin == 0){
	         this.$router.push('/admin/userIndex')
	       }
	       this.$message({
	         message: '登录成功！',
	         type: 'success'
	       });
	}else{
	    this.$message({
			message: data.message,
			type: 'error'
		});
	}
	 
	
    },

  },
  mounted(){
  	// this.enter()
  // 	if(sessionStorage.getItem("user")){
		// // console.log("登录")
		// this.$router.push("/admin/admin")
  // 	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  width: 500px;
  padding: 40px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 15px;
  background-color: rgb(255, 255, 255, .7);
}

.logo {
  display: flex;
  padding: 0 0 20px 0;
  align-items: center;
  justify-content: center;
}

.item {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  height: 40px;
  align-items: center;
}

.item input {
  width: 85%;
  height: 100%;
  border: 2px solid black;
  outline: none;
  background-color: transparent;
  border-radius: 10px;
  padding-left: 20px;
  font-size: 15px;
}

.btn{
  width: 100px;
  padding: 15px;
  background-color: #4f1b1b;
  text-align: center;
  margin: 0px auto;
  color: white;
  border-radius: 20px;
  cursor: pointer;

}
</style>
